<template>
  <div class='container'>
    <!-- 内容 -->
    <el-row :gutter="20" style="margin-bottom:20px">
      <el-col :span="6">【题型】：{{questionType}}</el-col>
      <el-col :span="6">【编号】：{{id}} </el-col>
      <el-col :span="6">【难度】：{{difficulty}} </el-col>
      <el-col :span="6">【标签】：{{tags}} </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-bottom:10px">
      <el-col :span="6">【学科】：{{subjectName}} </el-col>
      <el-col :span="6">【目录】：{{directoryName}} </el-col>
      <el-col :span="6">【方向】：{{direction}} </el-col>
    </el-row>
    <hr>
    <el-row :gutter="20">
      <el-col>【题干】：</el-col>
      <el-col style="color:blue" v-html= "question"> {{question}} </el-col>
      <!-- v-if 判断替代类型 要写三等 数字加引号是因为获取数据回来的就是一个字符串类型 -->
      <el-col v-if="questionType==='简答题'"></el-col>
    </el-row>
    <!-- 单选 -->
    <div class="box" v-if="questionType==='单选题'">
      <el-col> {{questionType}} 选项: (以下选中的选项为正确答案) </el-col>
      <el-radio-group :value="1">
        <span
          v-for="(item,ind) in options"
          :key="ind"
          style=" display:block;margin-top:20px">
          <el-radio :label="item.isRight"> {{item.title}} </el-radio>
        </span>
      </el-radio-group>
    </div>
    <!-- 多选 -->
    <div class="box" v-if="questionType==='多选题'">
      <el-col style="padding-bottom:20px"> {{questionType}} 选项: (以下选中的选项为正确答案)</el-col>
      <el-checkbox-group :value="[1]">
        <span
          v-for="(item,ind) in options"
          :key="ind"
          style=" display:block;padding-top:20px">
          <el-checkbox :label="item.isRight"> {{item.title}} </el-checkbox>
        </span>
      </el-checkbox-group>
    </div>
    <!-- end -->
    <hr>
    <div style="margin-top:10px">
      【参考答案】:
      <el-button size="mini" type="danger" @click="video = true">视频答案预览</el-button>
      <div class="video" v-if="video">
        <video
          controls
          :src="videoURL"
          autoplay="autoplay"
          style="width: 400px;height: 280px;">
        </video>
      </div>
    </div>
    <hr>
    <div style="display: flex">
      <p>【答案解析】:</p>
      <span v-html= "answer"> {{answer}} </span>
    </div>
    <hr>
    <div style="margin-bottom:20px">【题目备注】: {{remarks}} </div>
    <!-- 关闭按钮 -->
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="doDown">关闭</el-button>
    </span>
  </div>
</template>
<script>
import { detail } from '@/api/hmmm/questions'
export default {
  name: 'preview',
  props: ['sid', 'svideo'],
  data () {
    return {
      video: this.svideo, // 是否显示视频
      questionType: '', // 题型
      id: '', // 编号
      difficulty: '', // 难度
      tags: '', // 标签
      subjectName: '', // 学科
      directoryName: '', // 目录
      direction: '', // 方向
      question: '', // 题干
      options: [], // 选项
      videoURL: '', // 解析视频
      answer: '', // 答案解析
      remarks: '' // 题目备注
    }
  },
  created () {
    console.log(this.sid)
    this.dohTitlePreview(this.sid)
  },
  methods: {
    // 获取基础题库数据 发送axios请求
    async dohTitlePreview (id) {
      console.log(id)
      const res = await detail({ id })
      try {
      // 解构赋值
        const { questionType, id, difficulty, tags, subjectName, directoryName, direction, question, remarks, answer, options, videoURL } = res.data
        console.log(res)
        this.questionType = questionType.replace('1', '单选题').replace('2', '多选题').replace('3', '简答题')
        this.id = id
        this.difficulty = difficulty.replace('1', '简单').replace('2', '一般').replace('3', '困难')
        this.tags = tags
        this.subjectName = subjectName
        this.directoryName = directoryName
        this.direction = direction
        this.question = question
        this.remarks = remarks // 题目备注
        this.answer = answer
        this.options = options
        this.videoURL = videoURL
      } catch (err) {
        console.log(err)
        this.$message.error('获取数据失败!')
      }
    },
    // 点击关闭时
    doDown () {
      this.$emit('hClick')
      this.video = false
      this.isShowDialog = false
    }
  }
}
</script>
<style scoped>
.titleTop{
  display:block
}
.font{
  font-size: 12px;
  float: right;
}
.videoSrc{
  width: 300px;
  height: 300px
}
/* 关闭按钮的定位 */
.dialog-footer {
  position: absolute;
  bottom: 10px;
  right: 50px;
}
</style>
